<template>
  <el-card class="box-card" style="margin:auto; width: 800px;height: auto">
    <el-table
        :data="tableData"
        style="width: 100%"
        size="default">
      <el-table-column type="expand">
        <template #default="props">
          <el-form class="demo-table-expand">
            <el-form-item label="详细内容：">
              <span>{{ props.row.content }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
          label="日期"
          prop="pubTime">
      </el-table-column>
      <el-table-column
          label="标题"
          prop="title">
      </el-table-column>
      <el-table-column
          label="内容"
          prop="content"
          :show-overflow-tooltip="true">
      </el-table-column>
      <el-table-column
          label="操作"
          prop="desc">
        <template #default="scope">
          <el-button
              size="default"
              type="danger"
              @click="deleteBottle(scope.row)"
          >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        :page-size="size"
        layout="total, prev, pager, next"
        :total="total"
        :current-page="currentPage"
        @current-change="handleCurrentChange">
    </el-pagination>
  </el-card>
</template>

<script >
export default {
  name: "MyBottle",
  data() {
    return {
      user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
      total: 5,
      currentPage: 1,
      size:4,
      tableData: [
        {
          pubTime: '2023-06-12',
          title: '参商',
          content: '悉达多',
        },{
          pubTime: '2023-06-11',
          title: '黑塞',
          content: '玻璃游戏',
        },{
          pubTime: '2023-06-10',
          title: '莱农',
          content: '11111111111111111111111111\n11111111111111111111111111111111111111111111\n111111111111111111111111111111111111',
        },
        {
          pubTime: '2023-06-19',
          title: '你好',
          content: 'hello world',
        },
        {
          pubTime: '2023-06-19',
          title: '我是谁',
          content: '皮卡丘',
        },
      ]
    }
  },
  /*created() {
    this.load()
  },*/
  methods: {
    deleteBottle(bottle) {
      this.rq.post("/bottle/delete", bottle).then(res=>{
        if (res.code === '200') {
          this.$message.success("删除成功")
          this.load()
        } else {
          this.$message.error(res.msg)
        }
      }).catch((err) => {
        this.$message.error("未知错误")
      })
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.load()
    },
    load() {
      this.rq.get("bottle/list?user=" + this.user.username + "&pageNum=" + this.currentPage).then(res => {
        this.tableData = res.data.data
        this.total = res.data.total
      }).catch((err) => {
        this.$message.error("未知错误")
      })
    },
  }
}
import { InfoFilled } from '@element-plus/icons-vue'

const confirmEvent = () => {
  console.log('confirm!')
}
const cancelEvent = () => {
  console.log('cancel!')
}
</script>

<style scoped>
.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>
